<template>
  <div class="app-container">
    <el-form ref="passwordUpdateForm" :rules="rules" :model="param" label-width="100px">
      <el-form-item label="用户名" prop="username">
        <span>{{ param.username }}</span>
      </el-form-item>
      <el-form-item label="原密码" prop="oldPassword">
        <el-input v-model="param.oldPassword" :type="passw1" style="width: 200px;">
          <i slot="suffix" :class="icon1" @click="showPass1" />
        </el-input>
      </el-form-item>
      <el-form-item label="新密码" prop="newPassword">
        <el-input v-model="param.newPassword" :type="passw2" style="width: 200px;">
          <i slot="suffix" :class="icon2" @click="showPass2" />
        </el-input>
      </el-form-item>
      <el-form-item label="确认新密码" prop="reNewPassword">
        <el-input v-model="param.reNewPassword" :type="passw3" style="width: 200px;">
          <i slot="suffix" :class="icon3" @click="showPass3" />
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit()">提交</el-button>
        <router-link :to="'/'">
          <el-button style="margin-left: 10px;" @click="onCancel()">取消</el-button>
        </router-link>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { Message } from 'element-ui'
import { mapGetters } from 'vuex'
import { updatePassword } from '@/api/system-api'

export default {
  name: 'ProfilePassword',
  data() {
    return {
      add: false,
      passw1: 'password',
      icon1: 'el-input__icon el-icon-view',
      passw2: 'password',
      icon2: 'el-input__icon el-icon-view',
      passw3: 'password',
      icon3: 'el-input__icon el-icon-view',
      param: {
        username: null,
        oldPassword: null,
        newPassword: null,
        reNewPassword: null
      },
      rules: {
        username: [{
          required: true, message: '请输入用户名', trigger: 'blur'
        }],
        oldPassword: [{
          required: true, message: '请输入原密码', trigger: 'blur'
        }],
        newPassword: [{
          required: true, message: '请输入新密码', trigger: 'blur'
        }],
        reNewPassword: [{
          required: true, message: '请确认新密码', trigger: 'blur'
        }]
      }
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  created() {
    this.param.username = this.name
  },
  methods: {
    async logout() {
      await this.$store.dispatch('user/logout')
      this.$router.push(`/login`)
    },
    showPass1() {
      if (this.passw1 === 'text') {
        this.passw1 = 'password'
        this.icon1 = 'el-input__icon el-icon-view'
      } else {
        this.passw1 = 'text'
        this.icon1 = 'el-input__icon el-icon-loading'
      }
    },
    showPass2() {
      if (this.passw2 === 'text') {
        this.passw2 = 'password'
        this.icon2 = 'el-input__icon el-icon-view'
      } else {
        this.passw2 = 'text'
        this.icon2 = 'el-input__icon el-icon-loading'
      }
    },
    showPass3() {
      if (this.passw3 === 'text') {
        this.passw3 = 'password'
        this.icon3 = 'el-input__icon el-icon-view'
      } else {
        this.passw3 = 'text'
        this.icon3 = 'el-input__icon el-icon-loading'
      }
    },
    onSubmit() {
      this.$refs.passwordUpdateForm.validate((valid) => {
        if (!valid) {
          return
        }
        updatePassword(this.param).then(response => {
          this.$notify({
            title: '成功',
            message: '密码更新成功, 请重新登录',
            type: 'success',
            duration: 5 * 1000
          })
          this.logout()
        }).catch(error => {
          Message({
            message: error,
            type: 'error',
            duration: 5 * 1000
          })
        })
      })
    },
    onCancel() {
      this.$store.state.tagsView.visitedViews.splice(this.$store.state.tagsView.visitedViews.findIndex(item => item.path === this.$route.path), 1)
      this.$router.push(this.$store.state.tagsView.visitedViews[this.$store.state.tagsView.visitedViews.length - 1].path)
    }
  }
}

</script>
